<template>
  <div class="list">
    <topNav><slot>商品分类</slot> </topNav>
    <div class="listnav">
      <div class="left">
        <div
          :class="item.maitKey == activeid ? 'active' : ''"
          v-for="item in titleList"
          :key="item.maitKey"
          @click="headerTitle(item.maitKey)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="right">
        <div class="box" v-for="(item, index) in itemList" :key="index">
          <img :src="item.image" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>

    <!-- 底 -->
    <buttonNav></buttonNav>
  </div>
</template>

<script>
import { queryTitle, queryItem } from "@/plugins/api/index";
import ButtonNav from "../components/buttonNav.vue";
import topNav from "../components/topNav.vue";

export default {
  components: { topNav, ButtonNav },
  name: "List",
  data() {
    return {
      titleList: [],
      activeid: 3627,
      itemList: [],
    };
  },
  mounted() {
    this.requestTitle();
    this.requestItem();
  },
  methods: {
    headerTitle(maitKey) {
      this.titleList.forEach((element) => {
        if (maitKey == element.maitKey) {
          this.activeid = Number(element.maitKey);
          console.log(this.activeid);
          this.requestItem();
        }
      });
    },
    //标题数据
    requestTitle() {
      queryTitle().then((res) => {
        this.titleList = res.data.data.category.list;
      });
    },
    requestItem() {
      queryItem(this.activeid).then((res) => {
        console.log(res);
        this.itemList = res.data.data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.listnav {
  display: flex;
  margin-top: 50px;
  .left {
    width: 25%;
    background-color: #ccc;
    div {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }
  .active {
    background-color: rgb(255, 255, 255) !important;
    color: pink;
  }
  .right {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 10px ;
//   justify-content: space-around;
  .box {
    // border: 1px solid red;
    width: 30%;
    img {
      width: 100%;
    //   border: 1px solid red;
      border-radius:50px ;
    }
    p{
        text-align: center;
    }
  }
}
}
</style>